<template>
  <div class="stock-in">
    <div class="operation-header">
      <div class="header-info">
        <h4>药品入库管理</h4>
        <span class="operation-date">入库日期: {{ currentDate }}</span>
      </div>
      <div class="header-actions">
        <button class="primary-btn" @click="newStockIn">新建入库单</button>
        <button class="secondary-btn" @click="importFromOrder">从采购单导入</button>
      </div>
    </div>

    <!-- 入库单筛选 -->
    <div class="filter-section">
      <div class="filter-item">
        <label>入库单号:</label>
        <input type="text" v-model="filters.orderNo" placeholder="请输入入库单号">
      </div>
      <div class="filter-item">
        <label>供应商:</label>
        <select v-model="filters.supplier">
          <option value="">全部供应商</option>
          <option value="华北制药">华北制药</option>
          <option value="中美史克">中美史克</option>
          <option value="同仁堂">同仁堂</option>
        </select>
      </div>
      <div class="filter-item">
        <label>状态:</label>
        <select v-model="filters.status">
          <option value="">全部状态</option>
          <option value="pending">待入库</option>
          <option value="partial">部分入库</option>
          <option value="completed">已完成</option>
        </select>
      </div>
      <button class="search-btn" @click="searchOrders">查询</button>
      <button class="reset-btn" @click="resetFilters">重置</button>
    </div>

    <!-- 入库单列表 -->
    <div class="orders-section">
      <h5>入库单列表</h5>
      <table class="data-table">
        <thead>
          <tr>
            <th width="30"><input type="checkbox" @change="selectAll"></th>
            <th width="100">入库单号</th>
            <th width="100">供应商</th>
            <th width="80">创建日期</th>
            <th width="60">药品种类</th>
            <th width="80">总金额</th>
            <th width="80">状态</th>
            <th width="120">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="order in stockInOrders" :key="order.id">
            <td><input type="checkbox" :value="order.id"></td>
            <td>{{ order.orderNo }}</td>
            <td>{{ order.supplier }}</td>
            <td>{{ order.createDate }}</td>
            <td>{{ order.drugCount }}</td>
            <td>¥{{ order.totalAmount.toFixed(2) }}</td>
            <td>
              <span class="status-badge" :class="order.status">
                {{ order.statusText }}
              </span>
            </td>
            <td>
              <button class="action-btn" @click="viewOrder(order.id)">查看</button>
              <button class="action-btn" @click="processStockIn(order.id)" v-if="order.status !== 'completed'">入库</button>
              <button class="action-btn" @click="printOrder(order.id)">打印</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 快速入库 -->
    <div class="quick-stockin">
      <h5>快速入库</h5>
      <div class="quick-form">
        <div class="form-row">
          <div class="form-group">
            <label>药品名称:</label>
            <input type="text" v-model="quickForm.drugName" placeholder="输入药品名称或扫描条码">
          </div>
          <div class="form-group">
            <label>批号:</label>
            <input type="text" v-model="quickForm.batchNo" placeholder="生产批号">
          </div>
          <div class="form-group">
            <label>有效期:</label>
            <input type="date" v-model="quickForm.expiryDate">
          </div>
        </div>
        <div class="form-row">
          <div class="form-group">
            <label>入库数量:</label>
            <input type="number" v-model="quickForm.quantity" placeholder="数量">
          </div>
          <div class="form-group">
            <label>进货价:</label>
            <input type="number" v-model="quickForm.costPrice" placeholder="单价" step="0.01">
          </div>
          <div class="form-group">
            <label>供应商:</label>
            <select v-model="quickForm.supplier">
              <option value="">选择供应商</option>
              <option value="华北制药">华北制药</option>
              <option value="中美史克">中美史克</option>
              <option value="同仁堂">同仁堂</option>
            </select>
          </div>
        </div>
        <div class="form-actions">
          <button class="primary-btn" @click="quickStockIn">确认入库</button>
          <button class="secondary-btn" @click="clearQuickForm">清空</button>
        </div>
      </div>
    </div>

    <!-- 今日入库统计 -->
    <div class="today-stats">
      <h5>今日入库统计</h5>
      <div class="stats-grid">
        <div class="stat-item">
          <div class="stat-value">{{ todayStats.orderCount }}</div>
          <div class="stat-label">入库单数</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">{{ todayStats.drugTypes }}</div>
          <div class="stat-label">药品种类</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">{{ todayStats.totalQuantity }}</div>
          <div class="stat-label">入库数量</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">¥{{ todayStats.totalAmount.toLocaleString() }}</div>
          <div class="stat-label">入库金额</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const currentDate = ref(new Date().toLocaleDateString('zh-CN'))

// 筛选条件
const filters = ref({
  orderNo: '',
  supplier: '',
  status: ''
})

// 入库单数据
const stockInOrders = ref([
  {
    id: 'IN001',
    orderNo: 'RK20240115001',
    supplier: '华北制药',
    createDate: '2024-01-15',
    drugCount: 5,
    totalAmount: 2580.50,
    status: 'pending',
    statusText: '待入库'
  },
  {
    id: 'IN002',
    orderNo: 'RK20240115002',
    supplier: '中美史克',
    createDate: '2024-01-15',
    drugCount: 3,
    totalAmount: 1450.00,
    status: 'partial',
    statusText: '部分入库'
  },
  {
    id: 'IN003',
    orderNo: 'RK20240114001',
    supplier: '同仁堂',
    createDate: '2024-01-14',
    drugCount: 8,
    totalAmount: 3200.80,
    status: 'completed',
    statusText: '已完成'
  }
])

// 快速入库表单
const quickForm = ref({
  drugName: '',
  batchNo: '',
  expiryDate: '',
  quantity: '',
  costPrice: '',
  supplier: ''
})

// 今日统计
const todayStats = ref({
  orderCount: 5,
  drugTypes: 18,
  totalQuantity: 245,
  totalAmount: 8650
})

// 方法
const newStockIn = () => alert('新建入库单')
const importFromOrder = () => alert('从采购单导入')
const searchOrders = () => alert('查询入库单')
const resetFilters = () => {
  filters.value = { orderNo: '', supplier: '', status: '' }
}
const selectAll = (event: Event) => {
  const target = event.target as HTMLInputElement
  const checkboxes = document.querySelectorAll('.data-table tbody input[type="checkbox"]')
  checkboxes.forEach((cb: any) => cb.checked = target.checked)
}
const viewOrder = (orderId: string) => alert(`查看入库单: ${orderId}`)
const processStockIn = (orderId: string) => alert(`处理入库: ${orderId}`)
const printOrder = (orderId: string) => alert(`打印入库单: ${orderId}`)
const quickStockIn = () => {
  if (!quickForm.value.drugName || !quickForm.value.quantity) {
    alert('请填写必要信息')
    return
  }
  alert('快速入库成功')
  clearQuickForm()
}
const clearQuickForm = () => {
  quickForm.value = {
    drugName: '',
    batchNo: '',
    expiryDate: '',
    quantity: '',
    costPrice: '',
    supplier: ''
  }
}
</script>

<style scoped>
.stock-in {
  font-size: 12px;
}

.operation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
  border: 1px solid #ddd;
  padding: 10px 15px;
  margin-bottom: 10px;
}

.header-info h4 {
  margin: 0 0 2px 0;
  color: #333;
}

.operation-date {
  font-size: 11px;
  color: #666;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.primary-btn, .secondary-btn, .search-btn, .reset-btn {
  padding: 6px 12px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  border: none;
}

.primary-btn {
  background: #3498db;
  color: white;
}

.primary-btn:hover {
  background: #2980b9;
}

.secondary-btn, .reset-btn {
  background: white;
  border: 1px solid #bdc3c7;
  color: #333;
}

.secondary-btn:hover, .reset-btn:hover {
  background: #e8f4f8;
  border-color: #3498db;
}

.search-btn {
  background: #27ae60;
  color: white;
}

.search-btn:hover {
  background: #219a52;
}

.filter-section {
  background: white;
  border: 1px solid #ddd;
  padding: 10px 15px;
  margin-bottom: 10px;
  display: flex;
  gap: 15px;
  align-items: center;
  flex-wrap: wrap;
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.filter-item label {
  font-weight: bold;
  color: #333;
  white-space: nowrap;
}

.filter-item input, .filter-item select {
  border: 1px solid #ddd;
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 12px;
  width: 120px;
}

.orders-section, .quick-stockin, .today-stats {
  background: white;
  border: 1px solid #ddd;
  margin-bottom: 10px;
}

.orders-section h5, .quick-stockin h5, .today-stats h5 {
  background: #f8f9fa;
  border-bottom: 1px solid #ddd;
  padding: 8px 15px;
  margin: 0;
  font-size: 13px;
  color: #333;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.data-table th {
  background: #f8f9fa;
  border: 1px solid #ddd;
  padding: 6px 8px;
  text-align: left;
  font-weight: bold;
  font-size: 11px;
  color: #666;
}

.data-table td {
  border: 1px solid #ddd;
  padding: 4px 8px;
  vertical-align: top;
}

.data-table tr:nth-child(even) {
  background: #f9f9f9;
}

.data-table tr:hover {
  background: #e8f4f8;
}

.status-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 2px;
  font-weight: bold;
  color: white;
}

.status-badge.pending {
  background: #f39c12;
}

.status-badge.partial {
  background: #3498db;
}

.status-badge.completed {
  background: #27ae60;
}

.action-btn {
  background: none;
  border: none;
  color: #3498db;
  cursor: pointer;
  text-decoration: underline;
  font-size: 11px;
  padding: 2px 4px;
  margin-right: 5px;
}

.action-btn:hover {
  color: #2980b9;
}

.quick-form {
  padding: 15px;
}

.form-row {
  display: flex;
  gap: 15px;
  margin-bottom: 10px;
}

.form-group {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 5px;
}

.form-group label {
  font-weight: bold;
  color: #333;
  white-space: nowrap;
  width: 80px;
}

.form-group input, .form-group select {
  flex: 1;
  border: 1px solid #ddd;
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 12px;
}

.form-actions {
  margin-top: 10px;
  display: flex;
  gap: 10px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 15px;
}

.stat-item {
  text-align: center;
  padding: 10px;
  border: 1px solid #e0e0e0;
  background: #fafafa;
}

.stat-value {
  font-size: 16px;
  font-weight: bold;
  color: #2c3e50;
}

.stat-label {
  font-size: 11px;
  color: #666;
  margin-top: 2px;
}
</style> 